<template>
	<view class="">
		<!-- 搜索头部 -->
		<u-navbar 
		:is-fixed="fixed" 
		:is-back="back" 
		:background="background" 
		:custom-back="goBack"
		:back-icon-size="40"
		:border-bottom="false">
			<view class="slot-wrap">
				<view class="search-wrap">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search 
					:placeholder="placeholder" 
					@search="onSearch" 
					:animation="true" 
					v-model="keyword" 
					bg-color="#fff" 
					border-color="transparent" 
					:show-action="true" 
					height="56" 
					:focus="focus"
					@focus="onFocus"
					@change="onChange"
					></u-search>
				</view>
			</view>
	</u-navbar>
</view>
</template>

<script>
	import utils from '../../../utils/index.js'
	export default {
		props:{
			fixed:{
				type:Boolean,
				default:false
			},
			back:{
				type:Boolean,
				default:false
			},
			focus:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				background:{
					backgroundColor:'transparent'
				},
				keyword: '',
				placeholder:'搜索目的地/景点/酒店等',
			}
		},
		methods: {
			onChange(){
				utils.Debounce(()=>{
					this.$emit('change',this.keyword);
				},1000)
			},
			onSearch(){
				this.$emit('search',this.keyword);
			},
			onFocus(){
				this.$emit('focus');
			},
			goBack(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.t-icon{
	width: 60rpx;
	height: 60rpx;
	background-repeat: no-repeat;
}

.wrap {
	padding: 24rpx;
}

.search-wrap {
	margin: 0 20rpx;
	flex: 1;
	// filter:drop-shadow(10rpx 10rpx 4rpx rgba(0,0,0,.05))
	box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
	background-color: #fff;
	border-radius: 56rpx;
}
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}
</style>

